<form id="avatarForm" method="post" action="/user/avatarUpload.do" enctype="multipart/form-data">

    <div class="left-sidebar">
    <%@ page contentType="text/html; charset=utf-8"%>
    <!-- 用户信息 -->

        <div class="tpl-sidebar-user-panel">
            <div class="tpl-user-panel-slide-toggleable">


                    <div class="am-form-group am-form-file">
                        <div class="tpl-user-panel-profile-picture">
                            <img id="avatarImg" src="/usre/showAavatar.do" alt="">
                        </div>

                        <input id="doc-form-file" type="file" multiple="" name="avatarFile" onchange="uploadAvatar()">

                    </div>
                <a href="javascript:;" class="tpl-user-panel-action-link"> <span class="am-icon-pencil"></span> 账号设置</a>
            </div>

        </div>

    <!-- 菜单 -->
    <ul class="sidebar-nav">

        <li class="sidebar-nav-link">
            <a href="/user/toHome.do" id="home" >
                <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
            </a>
        </li>
        <li class="sidebar-nav-link">
            <a href="/card/toOpenaccount.do" id="openaccount">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 开户
            </a>
        </li>
        <li class="sidebar-nav-link">
            <a href="draw.html" id="draw">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 取款
            </a>
        </li>
        <li class="sidebar-nav-link">
            <a href="/card/toDeposit.do" id="deposit">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 存款

            </a>
        </li>
        <li class="sidebar-nav-link">
            <a href="/card/toTransfer.do" id="transfer">
                <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 转账

            </a>
        </li>

        <li class="sidebar-nav-link">
            <a href="/card/toFlow.do" id="flow">
                <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 流水

            </a>
        </li>

        <li class="sidebar-nav-link">
            <a href="/user/toEmailBind.do" id="bindEmail">
                <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 绑定邮箱

            </a>
        </li>

        <li class="sidebar-nav-link">
            <a href="/user/toMessage.do" id="myMessage">
                <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 我的消息

            </a>
        </li>

        <li class="sidebar-nav-link">
            <a href="/user/toVoice.do" id="myVoice">
                <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 我的音频

            </a>
        </li>



    </ul>
</div>

</form>

<script>
    function uploadAvatar() {
        // $('#avatarForm').submit();//此种提交 页面会跳转 体验不好
        $('#avatarForm').ajaxSubmit({
            url : '/user/avatarUpload.do',
            type : 'post',
            success : function (result) {
                $('#avatarImg').attr('src', '/usre/showAavatar.do?k=' + new Date().getTime());
            }
        });
    }
</script>